<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽复制</title>
</head>
<link href="../../css/joint.css" rel="stylesheet"/>
<link href="../../css/paper.css" rel="stylesheet"/>
<body>

<!--画布-->
<div id="paper"></div>

<script src="../../js/jquery.js"></script>
<script src="../../js/lodash.js"></script>
<script src="../../js/backbone.js"></script>
<script src="../../js/joint.js"></script>

<script>
    let element = {};
    let graph = new joint.dia.Graph;

    //声明画布
    let paper = new joint.dia.Paper({
        el:$("#paper"),
        width:800,
        height:600,
        gridSize:10,
        drawGrid:true,
        model:graph
    });

    //画矩形
    let rectangle = new joint.shapes.standard.Rectangle({id:1});
    rectangle.resize(50, 30);
    rectangle.position(50,50)
    rectangle.attr("label/text","矩形")
    rectangle.addTo(graph)

    paper.on("element:pointerclick",function (elementView,event,x,y) {

    });

    let nowId = "";
    let i = 0;

    paper.on("cell:pointerdown",function (cellView,event,x,y) {
        if(cellView.model.id == 1){
            let copyRec = new joint.shapes.standard.Rectangle();
            copyRec.resize(50, 30);
            copyRec.position(50,50)
            copyRec.attr("label/text","矩形"+i++)
            copyRec.addTo(graph)
            element[copyRec.id] = {id:copyRec.id,obj:copyRec}
            nowId = copyRec.id;
            rectangle.remove()

            rectangle = new joint.shapes.standard.Rectangle({id:1});
            rectangle.resize(50, 30);
            rectangle.position(50,50)
            rectangle.attr("label/text","矩形")
            rectangle.addTo(graph)
        }else {
            console.log(cellView.model.id)
            nowId = cellView.model.id
        }
    });

    paper.on("cell:pointermove",function (cellView,event,x,y) {
        let copyRec = element[nowId]["obj"]
        let posX = cellView.model.position().x;
        let posY = cellView.model.position().y;

        copyRec.position(posX,posY)
        element[nowId]["obj"].position(posX,posY)
    });
</script>
</body>
</html>